<template>
  <div class="suggest-container">
    <el-row :gutter="20">
      <el-col :span="19" :xs="24" :sm="19">
        <div class="college_wrap">
          <div class="config_box">
            <div class="top_type">
              <div
                class="sort_item"
                :class="sortItem == 1 ? 'active' : ''"
                @click="sortItemClick('1')"
              >
                院校库
              </div>
              <div
                class="sort_item"
                :class="sortItem == 2 ? 'active' : ''"
                @click="sortItemClick('2')"
              >
                分数库
              </div>
            </div>
            <div class="top_config">
              <div class="config_search">
                <el-input
                  size="small"
                  v-model="queryParams.school_name"
                  maxlength="99"
                  placeholder="输入院校"
                ></el-input>
              </div>
              <div class="config_year" v-if="sortItem == 2">
                <span>年份：</span>
                <div class="is_year_box">
                  <el-select size="small" v-model="queryParams.year">
                    <el-option
                      v-for="item in yearList"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </div>
                <span style="margin-left: 20px">分数区间：</span>
                <div class="is_input_box">
                  <el-input
                    v-model="queryParams.min_score"
                    controls-position="right"
                    :max="750"
                  ></el-input>
                  <el-input
                    style="margin-left: 20px"
                    v-model="queryParams.max_score"
                    controls-position="right"
                    :max="750"
                  ></el-input>
                </div>
              </div>
              <div class="config_item">
                <div class="item_left">就读地域</div>
                <div class="item_right">
                  <div
                    v-for="item in provideList"
                    :key="item.province_id"
                    @click="provideListClick(item)"
                    class="right_btn_item"
                  >
                    <span
                      :class="
                        queryParams.provide.includes(item.province_id)
                          ? 'active'
                          : ''
                      "
                    >
                      {{ item.name }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="config_item">
                <div class="item_left">院校类型</div>
                <div class="item_right">
                  <div
                    v-for="item in schoolList"
                    :key="item.type"
                    @click="schoolListClick(item)"
                    class="right_btn_item"
                  >
                    <span
                      :class="
                        queryParams.school.includes(item.type) ? 'active' : ''
                      "
                    >
                      {{ item.type_name }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="config_item">
                <div class="item_left">院校性质</div>
                <div class="item_right">
                  <div
                    v-for="item in natureList"
                    :key="item.id"
                    @click="natureListClick(item)"
                    class="right_btn_item"
                  >
                    <span
                      :class="
                        queryParams.nature.includes(item.id) ? 'active' : ''
                      "
                    >
                      {{ item.label }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="config_item">
                <div class="item_left">院校层次</div>
                <div class="item_right">
                  <div
                    v-for="item in levelList"
                    :key="item.id"
                    @click="levelListClick(item)"
                    class="right_btn_item"
                  >
                    <span
                      :class="
                        queryParams.level.includes(item.id) ? 'active' : ''
                      "
                    >
                      {{ item.label }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="top_selected">
              <div class="config_item">
                <div class="item_left">已选条件</div>
                <div class="item_right">
                  <span
                    v-for="item in provideList"
                    :key="item.type"
                    class="right_btn_item"
                    v-show="queryParams.provide.includes(item.province_id)"
                  >
                    <span :class="'active'"> {{ item.name }} </span>
                  </span>
                  <span
                    v-for="item in schoolList"
                    :key="item.province_id"
                    class="right_btn_item"
                    v-show="queryParams.school.includes(item.type)"
                  >
                    <span :class="'active'"> {{ item.type_name }} </span>
                  </span>
                  <span
                    v-for="item in natureList"
                    :key="item.id"
                    class="right_btn_item"
                    v-show="queryParams.nature.includes(item.id)"
                  >
                    <span :class="'active'"> {{ item.label }} </span>
                  </span>
                  <span
                    v-for="item in levelList"
                    :key="item.id"
                    class="right_btn_item"
                    v-show="queryParams.level.includes(item.id)"
                  >
                    <span :class="'active'"> {{ item.label }} </span>
                  </span>
                </div>
              </div>
              <div class="config_item">
                <div class="item_left"></div>
                <div class="item_right">
                  <div class="item_btn" @click="handleSearchBtn">确定</div>
                  <div class="item_btn" @click="resetSearch">重置筛选条件</div>
                </div>
              </div>
            </div>
          </div>

          <div class="is_table">
            <div
              class="is_table_item"
              v-for="(item, i) in list"
              :key="i"
              @click="schoolDetail(item)"
            >
              <div class="is_avatar">
                <img :src="item.logo" alt="" />
              </div>
              <div class="is_desc">
                <div class="desc1">{{ item.name }}</div>
                <div class="desc2">
                  <div class="is_tags_item">{{ item.province }}</div>
                  <div
                    class="is_tags_item"
                    v-for="(i, x) in item.tags.split(',')"
                    :key="x"
                  >
                    {{ i }}
                  </div>
                  <div class="is_tags_score">
                    <span>最低分/最低位次：</span
                    ><span>{{ item.sc_min_score }}/{{ item.score_rank }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="index_page">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :current-page="queryParams.page"
              :page-size="queryParams.pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
      <el-col :span="5" :xs="24" :sm="5">
        <right-wrap></right-wrap>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import rightWrap from "../components/rightWrap.vue";
import { EventBus } from "@/utils/eventBus";
import { province, schoolType, schoolList } from "@/api/index";
export default {
  name: "",
  components: { rightWrap },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  data() {
    return {
      sortItem: "1",
      provideList: [],
      schoolList: [],
      natureList: [
        { label: "公办", id: "公办" },
        { label: "民办", id: "民办" },
        { label: "中外合作办学", id: "中外合作办学" },
        { label: "内地与港澳台地区合作办学", id: "内地与港澳台地区合作办学" },
      ],
      levelList: [
        { label: "985", id: "985" },
        { label: "211", id: "211" },
        { label: "双一流", id: "双一流" },
        { label: "教育部直属", id: "教育部直属" },
        { label: "中央部委", id: "中央部委" },
        { label: "双高计划", id: "双高计划" },
        { label: "强基计划", id: "强基计划" },
      ],
      yearList: [],
      queryParams: {
        provide: [],
        school: [],
        nature: [],
        level: [],
        page: 1,
        pageSize: 10,
        min_score: "",
        max_score: "",
        year: "",
        school_name: "",
      },
      list: [],
      total: 0,
    };
  },
  created() {
    this.getdict();
    this.handleSearch();
    EventBus.$on("collegeEvent", (data) => {
      this.queryParams.school_name = data;
      this.handleSearch();
    });
  },
  methods: {
    /*
     * author：Gengbaodada
     * create by date：2025/05/02
     * content：分页
     */
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.handleSearch();
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth", // 启用平滑滚动
      });
    },
    getdict() {
      province().then((response) => {
        this.provideList = response.data;
      });
      schoolType().then((response) => {
        this.schoolList = response.data;
      });
      this.yearList = [
        this.parseTime(new Date(), "{y}") - 1,
        this.parseTime(new Date(), "{y}") - 2,
        this.parseTime(new Date(), "{y}") - 3,
        this.parseTime(new Date(), "{y}") - 4,
      ];
    },
    getList(queryParams) {
      console.log(queryParams);
      schoolList(queryParams).then((response) => {
        this.list = response.data.data;
        this.total = response.data.total;
      });
    },
    handleSearchBtn() {
      this.queryParams.page = 1;
      this.handleSearch();
    },
    handleSearch() {
      console.log("this.queryParams", this.queryParams);
      var queryParams = {};
      queryParams.page = this.queryParams.page;
      queryParams.pageSize = this.queryParams.pageSize;
      queryParams.min_score = this.queryParams.min_score;
      queryParams.max_score = this.queryParams.max_score;
      queryParams.year = this.queryParams.year;
      queryParams.province = this.queryParams.provide.join(",");
      queryParams.school_type = this.queryParams.school.join(",");
      queryParams.school_nature = this.queryParams.nature.join(",");
      queryParams.f985 = this.queryParams.level.includes("985") ? 1 : "";
      queryParams.f211 = this.queryParams.level.includes("211") ? 1 : "";
      queryParams.dual_class = this.queryParams.level.includes("双一流")
        ? 1
        : "";
      queryParams.department = this.queryParams.level.includes("教育部直属")
        ? 1
        : "";
      queryParams.central = this.queryParams.level.includes("中央部委")
        ? 1
        : "";
      queryParams.double_high = this.queryParams.level.includes("双高计划")
        ? 1
        : "";
      queryParams.qj = this.queryParams.level.includes("强基计划") ? 1 : "";
      queryParams.school_name = this.queryParams.school_name;
      /* const filtered = Object.keys(queryParams).reduce((acc, key) => {
            if (queryParams[key] !== "") {
                acc[key] = queryParams[key];
            }
            return acc;
        }, {}); */
      this.getList(queryParams);
    },
    resetSearch() {
      this.queryParams = {
        provide: [],
        school: [],
        nature: [],
        level: [],
        page: 1,
        pageSize: 10,
        min_score: "",
        max_score: "",
        year: "",
      };
      this.handleSearch();
    },
    schoolDetail(row) {
      this.$router.push({
        path: "/collegeDetail",
        query: { id: row.school_id },
      });
      EventBus.$emit("schoolDetails", row.school_id);
    },
    levelListClick(row) {
      this.queryParams.level = this.toggleValueInArray(
        this.queryParams.level,
        row.id
      );
    },
    natureListClick(row) {
      this.queryParams.nature = this.toggleValueInArray(
        this.queryParams.nature,
        row.id
      );
    },
    schoolListClick(row) {
      console.log(row.type);
      this.queryParams.school = this.toggleValueInArray(
        this.queryParams.school,
        row.type
      );
    },
    //地域
    provideListClick(row) {
      console.log(row.province_id);
      this.queryParams.provide = this.toggleValueInArray(
        this.queryParams.provide,
        row.province_id
      );
    },
    sortItemClick(value) {
      this.sortItem = value;
    },
  },
};
</script>

<style scoped lang="scss">
.index_page {
  margin: 20px;
  float: right;
}
.suggest-container {
  padding: 20px 0;
  height: 100%;
}

.is_choose_year_item {
  padding: 7px 10px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}

.is_input_box {
  width: 30%;
  height: 34px;
  padding-left: 10px;
  margin-right: 20px;
  outline: none;
  border-radius: 4px;
  display: flex;
  ::v-deep .el-input__inner {
    height: 34px;
  }
}

.is_choose_year_item:hover {
  color: #0478f1;
}

.config_box {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
}

.config_box .top_type {
  width: 100%;
  height: 56px;
  padding: 12px 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 2px solid #eff0f0;
}

.config_box .top_type .sort_item {
  height: 32px;
  padding: 0 12px;
  line-height: 32px;
  letter-spacing: 0.56px;
  border-radius: 4px;
  margin-right: 21px;
  cursor: pointer;
}

.config_box .top_type .active {
  color: #fff;
  font-weight: 700;
  background-color: #ff6a44;
}

.config_box .top_config,
.config_box .top_selected {
  padding: 16px 14px;
}
::v-deep .el-input__inner:focus {
  border-color: #dddfe5;
}
.config_box .top_config .config_search,
.config_box .top_selected .config_search {
  width: 360px;
  height: 40px;
  overflow: hidden;
  margin-bottom: 15px;
}

.config_box .top_config .config_search input[type="text"],
.config_box .top_selected .config_search input[type="text"] {
  padding-left: 10px;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}

.config_box .top_config .config_year,
.config_box .top_selected .config_year {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.config_box .top_config .config_year .is_choose_year,
.config_box .top_selected .config_year .is_choose_year {
  width: 100px;
  height: 34px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.config_box .top_config .config_item,
.config_box .top_selected .config_item {
  display: flex;
  justify-content: flex-start;
}

.config_box .top_config .config_item .item_left,
.config_box .top_selected .config_item .item_left {
  width: 58px;
  color: #9ca1a6;
  margin-right: 12px;
}

.config_box .top_config .config_item .item_right,
.config_box .top_selected .config_item .item_right {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.config_box .top_config .config_item .item_right .item_btn,
.config_box .top_selected .config_item .item_right .item_btn {
  color: #0478f1;
  font-weight: 600;
  font-size: 14px;
  margin: 10px 20px 0 8px;
  cursor: pointer;
}

.config_box .top_config .config_item .item_right .right_btn_item,
.config_box .top_selected .config_item .item_right .right_btn_item {
  color: #606166;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.config_box .top_config .config_item .item_right .right_btn_item span,
.config_box .top_selected .config_item .item_right .right_btn_item span {
  padding: 2px 8px;
}

.config_box .top_config .config_item .item_right .right_btn_item .active,
.config_box .top_selected .config_item .item_right .right_btn_item .active {
  background-color: rgba(201, 225, 251, 0.5);
  color: #0478f1;
}

.config_box .top_selected {
  width: 100%;
  border-top: 2px solid #eff0f0;
  padding: 12px 16px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0478f1;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #0478f1;
}

.college_wrap .config_box {
  margin-bottom: 20px;
}

.college_wrap .is_table {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

.college_wrap .is_table .is_table_item {
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  border-bottom: 2px solid #eff0f0;
  display: flex;
  justify-content: space-between;
}

.college_wrap .is_table .is_table_item .is_avatar {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

.college_wrap .is_table .is_table_item .is_avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.college_wrap .is_table .is_table_item .is_desc {
  flex: 1;
}

.college_wrap .is_table .is_table_item .is_desc .desc1 {
  color: #222224;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.college_wrap .is_table .is_table_item .is_desc .desc1:hover {
  color: #0478f1;
}

.college_wrap .is_table .is_table_item .is_desc .desc2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.college_wrap .is_table .is_table_item .is_desc .desc2 .is_tags_item {
  padding: 7px 10px;
  background-color: #f6f7f7;
  border-radius: 4px;
  color: #606166;
  font-size: 14px;
  margin-right: 10px;
  margin-top: 10px;
}

.college_wrap .is_table .is_table_item .is_desc .desc2 .is_tags_score {
  padding: 7px 10px;
  margin-top: 10px;
}

.college_wrap .is_table .is_table_item .is_desc .desc2 .is_tags_score span {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #606166;
}

.college_wrap
  .is_table
  .is_table_item
  .is_desc
  .desc2
  .is_tags_score
  span:nth-child(2) {
  color: #ff6a44;
}

.college_wrap .is_paging {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-bottom: 10px;
}
</style>
